<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hermes</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" sizes="16x16" href="favicon.ico">
    <link rel="icon" sizes="32x32" href="favicon.ico">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/default.min.css">
    <script>
        // 在页面加载前立即应用保存的主题
        (function() {
            try {
                const savedTheme = localStorage.getItem('hermes-theme');
                if (savedTheme === 'warm') {
                    document.documentElement.setAttribute('data-theme', 'warm');
                } else {
                    document.documentElement.setAttribute('data-theme', 'light');
                }
            } catch (error) {
                document.documentElement.setAttribute('data-theme', 'light');
            }
        })();
    </script>
</head>

<body>
    <div id="app">
        <!-- 启动画面 -->
        <div id="splash-screen" class="splash-screen">
            <div class="splash-content">
                <div class="splash-logo">🚀</div>
                <h1>Hermes</h1>
                <div class="loading-bar">
                    <div class="loading-progress"></div>
                </div>
                <p>正在加载...</p>
            </div>
        </div>

        <!-- 主界面 -->
        <div id="main-app" class="main-app" style="display: none;">
            <!-- 顶部工具栏 -->
            <div class="toolbar">
                <div class="toolbar-left">
                    <button id="toggle-sidebar" class="btn btn-icon" title="切换侧边栏">
                        <span class="icon">☰</span>
                    </button>
                    <button id="new-tab" class="btn btn-primary" title="新建标签页">
                        <span class="icon">+</span> 新建
                    </button>
                    <button id="save-tab" class="btn" title="保存标签页">
                        <span class="icon">💾</span> 保存
                    </button>
                    <button id="load-tab" class="btn" title="API管理">
                        <span class="icon">📁</span> API管理
                    </button>
                </div>
                <div class="toolbar-right">
                    <div id="environment-selector" class="environment-selector" style="display: none;">
                        <select id="environment-select" class="env-select">
                        </select>
                    </div>
                    <button id="url-history" class="btn" title="URL历史">
                        <span class="icon">🕒</span> 历史
                    </button>
                </div>
            </div>

            <div class="main-container">
                <!-- 侧边栏 -->
                <div id="sidebar" class="sidebar">
                    <div class="sidebar-header">
                        <h3>功能模块</h3>
                    </div>
                    <div class="sidebar-nav">
                        <div class="nav-item active" data-tab="http">
                            <span class="nav-icon">🌐</span>
                            <span class="nav-text">HTTP请求</span>
                        </div>
                        <div class="nav-item" data-tab="global-params">
                            <span class="nav-icon">📊</span>
                            <span class="nav-text">全局参数</span>
                        </div>
                        <div class="nav-item" data-tab="environment">
                            <span class="nav-icon">🌍</span>
                            <span class="nav-text">环境配置</span>
                        </div>
                        <div class="nav-item" data-tab="signature">
                            <span class="nav-icon">✍️</span>
                            <span class="nav-text">签名配置</span>
                        </div>
                        <div class="nav-item" data-tab="encryption">
                            <span class="nav-icon">🛡️</span>
                            <span class="nav-text">SM4加密</span>
                        </div>
                        <div class="nav-item" data-tab="settings">
                            <span class="nav-icon">⚙️</span>
                            <span class="nav-text">设置</span>
                        </div>
                    </div>
                </div>

                <!-- 主内容区 -->
                <div class="content-area" style="height: 100%; overflow-y: auto;">
                    <!-- HTTP请求面板 -->
                    <div id="http-panel" class="panel active">
                        <!-- 标签页头部 - 只在HTTP面板中显示 -->
                        <div class="tabs-header">
                            <div class="tabs-list">
                                <div class="tab active" data-tab-id="1">
                                    <span class="tab-title">请求 1</span>
                                    <button class="tab-close">×</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- HTTP请求内容区域 -->
                        <div class="http-request-content">
                            <div class="request-section">
                            <div class="request-line">
                                <select id="method-select" class="method-select">
                                    <option value="GET">GET</option>
                                    <option value="POST">POST</option>
                                    <option value="PUT">PUT</option>
                                    <option value="DELETE">DELETE</option>
                                    <option value="PATCH">PATCH</option>
                                </select>
                                <textarea id="url-input" class="url-input" placeholder="输入请求URL..." rows="1"></textarea>
                                <datalist id="url-suggestions"></datalist>
                                <button id="send-btn" class="btn btn-primary send-btn">发送</button>
                            </div>

                            <div class="request-options">
                                <div class="options-tabs">
                                    <button class="option-tab active" data-option="headers">请求头</button>
                                    <button class="option-tab" data-option="params">查询参数</button>
                                    <button class="option-tab" data-option="body">请求体</button>
                                    <button class="option-tab" data-option="advanced">高级选项</button>
                                </div>

                                <!-- 请求头 -->
                                <div id="headers-panel" class="option-panel active">
                                    <div class="headers-table">
                                        <div class="table-header">
                                            <div class="col-key">键</div>
                                            <div class="col-value">值</div>
                                            <div class="col-action">操作</div>
                                        </div>
                                        <div id="headers-list" class="table-body">
                                            <div class="header-row">
                                                <input type="text" class="header-key" placeholder="Content-Type">
                                                <input type="text" class="header-value" placeholder="application/json">
                                                <button class="btn-remove">删除</button>
                                            </div>
                                        </div>
                                        <button id="add-header" class="btn btn-small">+ 添加请求头</button>
                                    </div>
                                </div>

                                <!-- 查询参数 -->
                                <div id="params-panel" class="option-panel">
                                    <div class="params-table">
                                        <div class="table-header">
                                            <div class="col-key">参数名</div>
                                            <div class="col-value">参数值</div>
                                            <div class="col-action">操作</div>
                                        </div>
                                        <div id="params-list" class="table-body">
                                            <!-- 查询参数行将在这里动态添加 -->
                                        </div>
                                        <button id="add-param" class="btn btn-small">+ 添加查询参数</button>
                                    </div>
                                </div>

                                <!-- 请求体 -->
                                <div id="body-panel" class="option-panel">
                                    <div class="body-type-selector">
                                        <label><input type="radio" name="body-type" value="json" checked> JSON</label>
                                        <label><input type="radio" name="body-type" value="form"> Form Data</label>
                                        <label><input type="radio" name="body-type" value="text"> Text</label>
                                    </div>
                                    <div class="body-editor">
                                        <textarea id="body-textarea" placeholder="输入请求体内容..."></textarea>
                                    </div>
                                </div>

                                <!-- 高级选项 -->
                                <div id="advanced-panel" class="option-panel">
                                    <div class="advanced-options">
                                        <div class="option-group">
                                            <h4>自动添加参数</h4>
                                            <div class="option-item">
                                                <label>
                                                    <input type="checkbox" id="add-timestamp"> 添加时间戳
                                                </label>
                                                <div class="sub-options">
                                                    <input type="text" id="timestamp-field" placeholder="字段名"
                                                        value="timestamp">
                                                    <select id="timestamp-unit">
                                                        <option value="milliseconds">毫秒</option>
                                                        <option value="seconds">秒</option>
                                                    </select>
                                                    <select id="timestamp-pos">
                                                        <option value="query">查询参数</option>
                                                        <option value="header">请求头</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="option-item">
                                                <label>
                                                    <input type="checkbox" id="add-nonce"> 添加随机数
                                                </label>
                                                <div class="sub-options">
                                                    <input type="text" id="nonce-field" placeholder="字段名" value="nonce">
                                                    <input type="number" id="nonce-length" placeholder="长度" value="16"
                                                        min="1" max="64">
                                                    <select id="nonce-pos">
                                                        <option value="query">查询参数</option>
                                                        <option value="header">请求头</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="option-item">
                                                <label>
                                                    <input type="checkbox" id="add-appid"> 添加应用ID
                                                </label>
                                                <div class="sub-options">
                                                    <input type="text" id="appid-field" placeholder="字段名" value="appId">
                                                    <input type="text" id="appid-value" placeholder="应用ID值">
                                                    <select id="appid-pos">
                                                        <option value="query">查询参数</option>
                                                        <option value="header">请求头</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="option-group">
                                            <h4>签名和加密</h4>
                                            <div class="option-item">
                                                <label>
                                                    <input type="checkbox" id="add-signature"> 添加签名
                                                </label>
                                                <div class="sub-options">
                                                    <input type="text" id="signature-field" placeholder="字段名"
                                                        value="signature">
                                                    <select id="signature-pos">
                                                        <option value="query">查询参数</option>
                                                        <option value="header">请求头</option>
                                                    </select>
                                                    <button type="button" class="btn btn-small" id="open-signature-config">全局配置</button>
                                                </div>
                                                <div class="signature-config-section">
                                                    <div class="signature-config-toggle">
                                                        <label>
                                                            <input type="checkbox" id="use-custom-signature"> 使用自定义签名配置
                                                        </label>
                                                    </div>
                                                    <div class="signature-custom-config" id="signature-custom-config" style="display: none;">
                                                        <div class="form-group">
                                                            <label>签名密钥:</label>
                                                            <input type="text" id="signature-key" placeholder="输入签名密钥（优先级高于全局配置）">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>自定义签名代码:</label>
                                                            <textarea id="custom-signature-code-local" class="code-textarea" placeholder="按Tab自动插入签名示例代码，支持sha256Hex、params、key、body等"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="signature-status">
                                                    <small id="signature-status-text">未配置签名密钥 - 点击"全局配置"进行设置</small>
                                                </div>
                                            </div>
                                            <div class="option-item">
                                                <label>
                                                    <input type="checkbox" id="encrypt-body"> SM4加密请求体
                                                </label>
                                            </div>
                                            <div class="option-item">
                                                <label>
                                                    <input type="checkbox" id="decrypt-response"> SM4解密响应体
                                                </label>
                                            </div>
                                            <div class="sm4-config">
                                                <input type="text" id="sm4-key" placeholder="SM4密钥(16字节)"
                                                    maxlength="16">
                                                <input type="text" id="sm4-iv" placeholder="SM4 IV(16字节)"
                                                    maxlength="16">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>

                            <!-- 响应区域 -->
                            <div class="response-section">
                                <div class="response-header">
                                    <h3>响应结果</h3>
                                    <div class="response-stats">
                                        <span id="response-status" class="status-badge"></span>
                                        <span id="response-time" class="time-badge"></span>
                                    </div>
                                </div>

                                <div class="response-tabs">
                                    <button class="response-tab active" data-response="body">响应体</button>
                                    <button class="response-tab" data-response="headers">响应头</button>
                                </div>

                                <div id="response-body" class="response-panel active">
                                    <div class="response-content">
                                        <pre id="response-body-content"></pre>
                                    </div>
                                </div>

                                <div id="response-headers" class="response-panel">
                                    <div class="response-content">
                                        <pre id="response-headers-content"></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 签名配置面板 -->
                    <div id="signature-panel" class="panel">
                        <div class="panel-content">
                            <h2>签名配置</h2>
                            <div class="config-section">
                                <h3>默认签名算法</h3>
                                <div class="algorithm-description">
                                    <p>1. 将参数按键名排序</p>
                                    <p>2. 遍历排序后的参数，跳过signature字段</p>
                                    <p>3. 将所有参数值拼接成字符串</p>
                                    <p>4. 在拼接字符串末尾添加签名密钥</p>
                                    <p>5. 使用SHA256算法生成哈希值作为签名</p>
                                </div>

                                <div class="form-group">
                                    <label>签名密钥:</label>
                                    <input type="text" id="default-signature-key" placeholder="输入签名密钥">
                                </div>
                            </div>

                            <div class="config-section">
                                <h3>自定义签名代码</h3>
                                <div class="code-editor">
                                    <textarea id="custom-signature-code" class="code-textarea" placeholder="按Tab自动插入签名示例代码，支持sha256Hex、params、key、body等"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SM4加密面板 -->
                    <div id="encryption-panel" class="panel">
                        <div class="panel-content">
                            <h2>SM4加密配置</h2>

                            <div class="config-section">
                                <div class="config-header" id="key-config-toggle">
                                    <h3>密钥配置</h3>
                                    <span class="toggle-icon">▼</span>
                                </div>
                                <div class="config-content" id="key-config-content" style="display: none;">
                                    <div class="form-group">
                                        <label>SM4密钥 (16字节):</label>
                                        <input type="text" id="sm4-shared-key" placeholder="输入16字节密钥" maxlength="16">
                                    </div>

                                    <div class="form-group">
                                        <label>初始化向量 (16字节):</label>
                                        <input type="text" id="sm4-shared-iv" placeholder="输入16字节IV" maxlength="16">
                                    </div>
                                </div>
                            </div>

                            <div class="config-section">
                                <h3>加密/解密测试</h3>
                                
                                <!-- 输入输出区域 -->
                                <div class="sm4-io-container">
                                    <div class="sm4-input-section">
                                        <div class="form-group">
                                            <label>输入:</label>
                                            <textarea id="sm4-input" placeholder="输入要加密的明文或要解密的密文(Base64)"></textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="sm4-controls">
                                        <div class="button-group-vertical">
                                            <button id="test-encrypt" class="btn btn-primary">
                                                <span class="icon">🔒</span> 加密
                                            </button>
                                            <button id="test-decrypt" class="btn btn-primary">
                                                <span class="icon">🔓</span> 解密
                                            </button>
                                        </div>
                                        <div class="button-group-vertical">
                                            <button id="copy-result" class="btn btn-secondary">
                                                <span class="icon">📋</span> 复制
                                            </button>
                                            <button id="clear-content" class="btn btn-secondary">
                                                <span class="icon">🗑️</span> 清空
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="sm4-output-section">
                                        <div class="form-group">
                                            <label>输出:</label>
                                            <textarea id="sm4-output" readonly placeholder="加密/解密结果将显示在这里"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 环境配置面板 -->
                    <div id="environment-panel" class="panel">
                        <div class="panel-content">
                            <h2>环境配置</h2>

                            <!-- 标签页导航 -->
                            <div class="config-tabs">
                                <button class="config-tab active" data-tab="env-types">环境类型配置</button>
                                <button class="config-tab" data-tab="projects">项目配置</button>
                            </div>

                            <!-- 环境类型配置标签页内容 -->
                            <div class="config-tab-content active" id="env-types-tab-content">
                                <div class="env-types-list" id="env-types-list">
                                    <!-- 环境类型列表将在这里动态生成 -->
                                </div>
                                <div class="env-types-actions">
                                    <button id="add-env-type" class="btn btn-primary">
                                        <span class="icon">➕</span> 添加环境类型
                                    </button>
                                    <button id="restore-default-env-types" class="btn" title="恢复为默认的环境类型配置（本地、开发、测试、预发布、生产）">
                                        <span class="icon">🔄</span> 恢复默认配置
                                    </button>
                                </div>
                            </div>

                            <!-- 项目配置标签页内容 -->
                            <div class="config-tab-content" id="projects-tab-content">
                                <div class="projects-list" id="projects-list">
                                    <!-- 项目列表将在这里动态生成 -->
                                </div>
                                <div class="projects-actions">
                                    <button id="add-project" class="btn btn-primary">
                                        <span class="icon">➕</span> 添加项目
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 全局参数面板 -->
                    <div id="global-params-panel" class="panel">
                        <div class="panel-content">
                            <h2>全局参数</h2>
                            <div id="global-headers-container">
                                <!-- 全局请求头配置界面将在这里动态生成 -->
                            </div>
                        </div>
                    </div>

                    <!-- 设置面板 -->
                    <div id="settings-panel" class="panel">
                        <div class="panel-content">
                            <h2>应用设置</h2>

                            <div class="config-section">
                                <h3>界面设置</h3>
                                <div class="form-group">
                                    <label>主题:</label>
                                    <select id="settings-theme">
                                        <option value="light">浅色主题</option>
                                        <option value="warm">米黄主题</option>
                                    </select>
                                </div>
                            </div>

                            <div class="config-section">
                                <h3>快捷键</h3>
                                <div class="shortcuts-list">
                                    <div class="shortcut-item">
                                        <span class="shortcut-key">Ctrl + N</span>
                                        <span class="shortcut-desc">新建标签页</span>
                                    </div>
                                    <div class="shortcut-item">
                                        <span class="shortcut-key">Ctrl + T</span>
                                        <span class="shortcut-desc">复制当前时间</span>
                                    </div>
                                    <div class="shortcut-item">
                    <span class="shortcut-key">Ctrl + W</span>
                    <span class="shortcut-desc">关闭当前标签页</span>
                </div>
                <div class="shortcut-item">
                    <span class="shortcut-key">Ctrl + M</span>
                    <span class="shortcut-desc">打开/关闭API管理面板</span>
                </div>
                                    <div class="shortcut-item">
                                        <span class="shortcut-key">Ctrl + S</span>
                                        <span class="shortcut-desc">保存当前标签页</span>
                                    </div>
                                    <div class="shortcut-item">
                                        <span class="shortcut-key">Ctrl + Enter</span>
                                        <span class="shortcut-desc">发送请求</span>
                                    </div>
                                    <div class="shortcut-item">
                                        <span class="shortcut-key">Ctrl + F</span>
                                        <span class="shortcut-desc">格式化JSON（请求体编辑器中）</span>
                                    </div>
                                </div>
                            </div>

                            <div class="config-section">
                                <h3>数据管理</h3>
                                <button id="export-settings" class="btn" title="导出签名和SM4加密配置">导出设置</button>
                                <button id="import-settings" class="btn" title="导入签名和SM4加密配置">导入设置</button>
                                <button id="export-environment" class="btn" title="导出环境类型和项目配置">导出环境配置</button>
                                <button id="import-environment" class="btn" title="导入环境类型和项目配置（自动去重覆盖）">导入环境配置</button>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div id="modal-overlay" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <h3 id="modal-title">标题</h3>
                <button class="modal-close">×</button>
            </div>
            <div class="modal-body" id="modal-body">
                内容
            </div>
            <div class="modal-footer">
                <button id="modal-cancel" class="btn">取消</button>
                <button id="modal-confirm" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>

    <!-- 环境类型编辑模态框 -->
    <div id="env-type-modal" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <h3 id="env-type-modal-title">添加环境类型</h3>
                <button class="modal-close" onclick="closeEnvTypeModal()">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>环境类型名称:</label>
                    <input type="text" id="env-type-name" placeholder="如: dev, qa, uat, prod">
                </div>
                <div class="form-group">
                    <label>显示名称:</label>
                    <input type="text" id="env-type-display" placeholder="如: 开发环境, 测试环境">
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="closeEnvTypeModal()" class="btn">取消</button>
                <button onclick="saveEnvType()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

    <!-- 项目配置编辑模态框 -->
    <div id="project-modal" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <h3 id="project-modal-title">添加项目</h3>
                <button class="modal-close" onclick="closeProjectModal()">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>项目名称:</label>
                    <input type="text" id="project-name" placeholder="项目名称">
                </div>
                <div class="form-group">
                    <label>上下文路径:</label>
                    <input type="text" id="project-context" placeholder="如: device-manager">
                </div>
                <div class="form-group">
                    <label>环境配置:</label>
                    <div id="project-environments">
                        <!-- 环境配置列表将在这里动态生成 -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="closeProjectModal()" class="btn">取消</button>
                <button onclick="saveProject()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
    <script src="core.js"></script>
    <script src="tabs.js"></script>
    <script src="http.js"></script>
    <script src="encryption.js"></script>
    <script src="signature.js"></script>
    <script src="settings.js"></script>
    <script src="history.js"></script>
    <script src="ui.js"></script>
    <script src="tabManagement.js"></script>
    <script src="environment.js"></script>
    <script src="environment-selector.js"></script>
    <script src="global-headers.js"></script>
    <script src="app.js"></script>
</body>

</html>